<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in skuImageList" :key="item.id">
				<img :src="item.imgUrl" :class="{ active: index == activeIndex }" @click="changeActiveIndex(index)" />
			</div>
		</div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
</template>

<script>
import Swiper from 'swiper';
export default {
	name: 'ImageList',
	props: ['skuImageList'],
	data() {
		return {
			activeIndex: 0
		};
	},
	watch: {
		skuImageList: {
			handler() {
				this.$nextTick(() => {
					new Swiper('.swiper-container', {
						// loop: true, // 循环模式选项

						slidesPerView: 3,

						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev'
						}
					});
				});
			}
		}
	},
	methods: {
		/**
		 * 点击轮播图图片，让当前点击的添加active类名
		 */
		changeActiveIndex(index) {
			this.activeIndex = index;
			// 通知兄弟组件，修改大图的显示图片
			this.$bus.$emit('changImg', index);
		}
	}
};
</script>

<style lang="less" scoped>
.swiper-container {
	height: 56px;
	width: 412px;
	box-sizing: border-box;
	padding: 0 12px;

	.swiper-slide {
		width: 56px;
		height: 56px;

		img {
			width: 100%;
			height: 100%;
			border: 1px solid #ccc;
			padding: 2px;
			width: 50px;
			height: 50px;
			display: block;

			&.active {
				border: 2px solid #f60;
				padding: 1px;
			}
		}
	}

	.swiper-button-next {
		left: auto;
		right: 0;
	}

	.swiper-button-prev {
		left: 0;
		right: auto;
	}

	.swiper-button-next,
	.swiper-button-prev {
		box-sizing: border-box;
		width: 12px;
		height: 56px;
		background: rgb(235, 235, 235);
		border: 1px solid rgb(204, 204, 204);
		top: 0;
		margin-top: 0;
		&::after {
			font-size: 12px;
		}
	}
}
</style>
